<template>
	<view>
		<my-search @goSearch="goSearch"></my-search>
		<view class="goods-list" v-if="total!==0">
		      <block v-for="(goods, i) in goodsList" :key="i">
				  <view class="goods-ite" @click="goDetail(goods.goods_id)">
				  	<goods-item :goods="goods"></goods-item>
				  </view>
		      </block>
		</view>
		<view class="empty-cart" v-else>
		    <image src="../../static/cart_empty@2x.png" class="empty-img"></image>
		    <text class="tip-text">空空如也~</text>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
				      // 查询关键词
				      query: '',
				      // 商品分类Id
				      cid: '',
				      // 页码值
				      pagenum: 1,
				      // 每页显示多少条数据
				      pagesize: 10
				},
				// 商品列表的数据
				goodsList: [],
				// 总数量，用来实现分页
				total: 0,
				// 节流
				isLoading:false
			};
		},
		onLoad(options) {
			console.log(options);
			this.queryObj.query = options.query || ''
			console.log(this.queryObj.query);
			this.queryObj.cid = options.cid || ''
			this.getGoodsList()
		},
		onReachBottom() {
			if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total) return uni.$showMsg('没有更多数据了~')
			if(this.isLoading) return
			this.queryObj.pagenum++
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.queryObj.pagenum = 1
			this.total = 0
			this.goodsList = []
			this.isLoading = false
			this.getGoodsList(()=>{uni.stopPullDownRefresh()})
		},
		methods:{
			async getGoodsList(callback) {
			    // 发起请求
				this.isLoading = true
			    const { data: res } = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
			    this.isLoading = false
				if (res.meta.status !== 200) return uni.$showMsg()
				callback && callback()
			    // 为数据赋值
				console.log(res.message);
			    this.goodsList = [...this.goodsList,...res.message.goods]
			    this.total = res.message.total
			  },
			  goSearch(){
			  	// console.log('跳转搜索页面');
			  	uni.navigateTo({
			  		url:'/subpkg/search/search'
			  	})
			  },
			  goDetail(goods_id){
				  uni.navigateTo({
				  	url:'/subpkg/goods_detail/goods_detail?goods_id='+goods_id
				  })
			  }
		}
	}
</script>

<style lang="scss">
	.goods-list {
		box-sizing: border-box;
		width: 100%;
		padding: 15px 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.goods-ite {
		width: 48%;
	}
	.empty-cart {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding-top: 150px;
	
	  .empty-img {
	    width: 90px;
	    height: 90px;
	  }
	
	  .tip-text {
	    font-size: 12px;
	    color: gray;
	    margin-top: 15px;
	  }
	}
</style>
